<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleSave"
    :maskClosable="false"
    cancelText="关闭"
  >
     <a-form-model ref="mainForm" :model="hteFile" >
          <a-form-model-item  label="文件类别" tyle="width: 100%" prop="fileType">
                <a-tree-select
                  v-model="hteFile.fileType"
                  :tree-data="treeData"
                  placeholder="请选择文件类别"
                  tree-default-expand-all
                  @change="treeChage"  
                >
                </a-tree-select>
              </a-form-model-item>
        </a-form-model>
 <!-- 操作按钮区域 -->
    <div class="table-operator" style="margin-top:8px">
      <a-button @click="handleAdd" icon="plus">增加</a-button>
      <a-button @click="handleDel" icon="delete">删除</a-button>
    </div>
        <!-- table区域-begin -->
    <div>
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        rowKey="id"
        :pagination="false"
        :scroll="{ y: 500 }"
      >
        <a slot="name" slot-scope="text, record, index">
          <a-input style="margin: -5px 0" v-model="text" @change="(e) => handleChange(e.target.value, index, 'name')" />
        </a>
        <a slot="required" slot-scope="text, record, index">
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            v-model="text"
            @click="(c, e) => handleChange(c, index, 'required')"
          />
        </a>
        <a slot="sort" slot-scope="text, record, index">
          <a-input-number style="margin: -5px 0" v-model="text" @change="(e) => handleChange(e, index, 'sort')" />
        </a>
        <a slot="showInTable" slot-scope="text, record, index">
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            v-model="text"
            @click="(c, e) => handleChange(c, index, 'showInTable')"
          />
        </a>
        <a slot="showInDetails" slot-scope="text, record, index">
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            v-model="text"
            @click="(c, e) => handleChange(c, index, 'showInDetails')"
          />
        </a>
      </a-table>
    </div>
  </j-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import HteFileClassForm from './HteFileClassForm'

export default {
  name: 'HteFileClassAttrCopyModal',
  components: {},
  data() {
    return {
        hteFile:{
            fileType:''
        },
      classId: '',
      columns: [
        {
          title: '属性名称',
          dataIndex: 'name',
          width: '30%',
          scopedSlots: { customRender: 'name' },
        },

        {
          title: '是否必填',
          dataIndex: 'required',
          width: '20%',
          scopedSlots: { customRender: 'required' },
        },
        {
          title: '排序',
          dataIndex: 'sort',
          width: '20%',
          scopedSlots: { customRender: 'sort' },
        },
        {
          title: '是否显示在列表',
          dataIndex: 'showInTable',
          width: '30%',
          scopedSlots: { customRender: 'showInTable' },
        },
         {
          title: '是否显示在明细',
          dataIndex: 'showInDetails',
          width: '30%',
          scopedSlots: { customRender: 'showInDetails' },
        },
      ],
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      data: [],
      selectedRowKeys: [],
      rowKeyIndex: -1,
      url: {
        save: '/lib/hteFileClass/saveAttr',
        listAttr: '/lib/hteFileClass/listAttr',
        deleteBatch: '/lib/hteFileClass/deleteAttrBatch',
         getTreeList: '/lib/hteFileClass/getTreeList',
      },
      parentId:'',
      treeData:[],
      attrData:[]
    }
  },
  methods: {
    treeChage(value){
        this.classId = value
        
        this.loadAttr()
    },
    fetchClassTree() {
      getAction(this.url.getTreeList, { parentId: this.parentId }).then((res) => {
        if (res.success) {
          this.treeData = res.result.treeList
        } else {
          this.$message.error('获取分类树错误')
        }
      })
    },
    add(parentId) {
      this.visible = true
      this.parentId = parentId
      this.data = []
      this.hteFile.fileType=''
      this.fetchClassTree()
    },
     handleSave() {
      let that = this
      if(this.data.length==0){
        this.$message.error("属性为空")
        return
      }
      for (let index = 0; index < this.data.length; index++) {
          const element = this.data[index];
            let isCheckName = that.attrData.find(item=>{
          return item.name ==  element.name
        })

        if(!!isCheckName){
             this.$message.error(`${element.name}属性名称已存在`)
             return
        }
      }
      
     this.$emit('ok',this.data)
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },

    handleChange(value, index, column) {
      // debugger
      this.$set(this.data[index],column,value)
    },
  
    handleAdd() {
      debugger
      this.data.push({ id: this.rowKeyIndex, name: '', required: false, sort: '' })
      this.rowKeyIndex--
    },
    loadAttr() {
      getAction(this.url.listAttr, { classId: this.classId }).then((res) => {
        if (res.success) {
          console.log(res)
          this.data = []
           this.selectedRowKeys=[];
          res.result.forEach(item=>{
              this.data.push({ id: this.rowKeyIndex, name: item.name, required: item.required, sort: item.sort ,showInTable:item.showInTable, showInDetails:item.showInDetails,})  
                this.rowKeyIndex--
          })
        }
      })
    },
    
    handleDel() {
      
      var that = this
      this.$confirm({
        title: '确认删除',
        content: '是否删除选中数据?',
        onOk: function () {
          let ids = ''
          that.selectedRowKeys.forEach((key) => {
           
            const index = that.data.findIndex((v) =>  v.id === key)
            that.data.splice(index, 1)
          })
     
            that.selectedRowKeys=[];
            // that.onClearSelected()
        },
      })
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>
